window.addEventListener('load', function() {
    var level = 3;
    var stage = document.querySelector('.stage');
    var btn = document.querySelector('button');

    function updatePos(dom) {
        dom.style.left = (dom.dataset.c % level) * 100 + 'px';
        dom.style.top = Math.floor(dom.dataset.c / level) * 100 + 'px';
    }

    // 生成DOM
    for (var i = 0; i < level * level; i++) {
        // 创建dom
        var card = document.createElement('div');
        card.dataset.o = i;
        card.dataset.c = i;
        card.id = 'x' + i;
        // 记住第一个px要敲个空格
        card.style.backgroundPosition = (i % level) * -100 + 'px ' + Math.floor(i / level) * -100 + 'px';
        // dom的位置
        updatePos(card);

        // 设置拖放属性
        card.setAttribute('draggable', 'true');

        // 添加事件
        card.addEventListener('dragstart', function(e) {
            // console.log(e.target.id);
            // 保存数据id
            e.target.classList.add('leave');
            e.dataTransfer.setData('text', e.target.id);

        })

        card.addEventListener('dragenter', function(e) {
            e.target.classList.add('over');
        })

        card.addEventListener('dragleave', function(e) {
            e.target.classList.remove('over');
        })

        card.addEventListener('dragover', function(e) {
            e.preventDefault();
            // console.log(2222);

        })

        card.addEventListener('drop', function(e) {
            // console.log(3333);
            // 获取元素id
            var dragEle = document.getElementById(e.dataTransfer.getData('text', e.target.id));
            // console.log(dragEle);
            var dropEle = e.target;
            // console.log(dropEle);
            // console.log(dragEle.dataset.c);
            // console.log(dropEle.dataset.c);

            // 获得两个元素需要交换的索引c
            var dragEleC = dragEle.dataset.c;
            var dropEleC = dropEle.dataset.c;

            // 交换两个元素的索引c
            dragEle.dataset.c = dropEleC;
            dropEle.dataset.c = dragEleC;

            // 交换并获得彼此位置
            updatePos(dragEle);
            updatePos(dropEle);

            dragEle.classList.remove('leave');
            dropEle.classList.remove('over');
            if (isSame()) {
                setTimeout(function() {
                    alert('成功了！')
                }, 1000)
            }
        })

        stage.append(card);

    }

    function isSame() {
        var cardEls = Array.prototype.slice.call(document.querySelectorAll('.stage div'));
        return cardEls.every(function(e) {
            return e.dataset.o === e.dataset.c;
        });
    }

    function randomPosition() {
        var arr = [];
        for (var i = 0; i < level * level; i++) {
            arr[i] = i;
        }
        arr.sort(function() {
            return Math.random() - 0.5;
        })

        document.querySelectorAll('.stage div').forEach(function(ele, index) {
            ele.dataset.c = arr[index];
            updatePos(ele);
        })

    }
    btn.addEventListener('click', function() {
        randomPosition();
    })
})